Le toggle peut être positionné dans un bouton si on le souhaite.
Lorsqu'il est activé il envoi l'événement toggle_[id]_active
et quand il est désactivé toggle_[id]_disabled
Vous pouvez donc écrire ceci, qui va afficher indiquer dans la console quand le toggle est activé.
document.getElementById('simple').addEventListener('toggle_simple_active', ()=>{console.log("Le toggle à été activé")});
Vous pouvez remplacer le console.log() par un autre code selon l'usage que vous voulez faire du toggle
.js requis :
<div class="o-toggle" id="simple">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
<button class="o-btn o-btn--light js-toggle-trigger" id="btntoggle"><span>Déplacer les sondages sur la carte</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
Lorsque l'icone est activé il envoi l'événement toggle_[id]_edit_active
et quand il est désactivé toggle_[id]_edit_disabled
Vous pouvez donc écrire ceci, qui va afficher indiquer dans la console quand le toggle est activé.
jQuery('#btntoggle').on('toggle_btntoggle_edit_active', function (e) {console.log("L'edit toggle à été activé")});
jQuery('#btntoggle').on('toggle_btntoggle_edit_disabled', function (e) {console.log("L'edit toggle à été désactivé")});
Vous pouvez remplacer le console.log() par un autre code selon l'usage que vous voulez faire du toggle
<button class="o-btn o-btn--light js-toggle-trigger" id="btntoggle"><span>Déplacer les sondages sur la carte</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div><a class="js-toggle-edit"><i class="c-fonticon__icon-edit"></i></a>
</button>